import React, { useEffect, useState } from 'react';
import utils from '../../../utils';
import md5 from 'md5';
import Network from '../../../utils/network';
import { Container, Form, FormGroup, Row, Col, Button } from 'react-bootstrap';
import { Link, useNavigate } from 'react-router-dom';
import UserService from '../../../services/userservice';
import { PopupDialog } from '../../../components/common';
import eventEmitter from '../../../utils/EventEmitter';
import constants from '../../../constants';
import "./commonStyle.css";

const Register:React.FC = ()=> {


    const [username,setUsername] = useState<string|null>(null);
    const [password,setPassword] = useState<string|null>(null);
    const [confirmedpassword,setConfirmedPassword] = useState<string|null>(null);
    const navigate = useNavigate();

    const stringutil = utils.str;

    useEffect(()=>{
        eventEmitter.dispatch(constants.str.hideTopContent);
    },[])

    const register = ()=>{
        if(stringutil.isNullOrEmpty(username)){
            PopupDialog.showBSPopup({message:"username can not be null"});
            return;
        }
        if(stringutil.isNullOrEmpty(password)){
            PopupDialog.showBSPopup({message:"password can not be null"});
            return;
        }
        if(stringutil.isNullOrEmpty(confirmedpassword)){
            PopupDialog.showBSPopup({message:"confirmed password can not be null"});
            return;
        }
        if(password !== confirmedpassword){
            PopupDialog.showBSPopup({message:"the password and confirmed password are not align, please correct it!"});
            return;
        }

        var pwdmd5 = md5(password!);
        console.debug(`created md5:${pwdmd5}`);
        UserService.register({
            username:username!,
            password:pwdmd5!
        }).then((resp)=>{
            console.debug(JSON.stringify(resp));
            PopupDialog.showBSPopup({message:"Registered Successfully",},()=>{
                navigate("/user/login");
            })
        }).catch((err)=>{
            PopupDialog.showBSPopup({message:err.message||"unexpected error ocurred!"});
            console.debug(err);
        })
    }

    const onChangeUsername = (e:any)=> {
        setUsername(e.target.value);
    }

    const onChangePassword = (e:any)=> {
        setPassword(e.target.value);
    }

    const onChangeConfirmPwd = (e:any)=> {
        setConfirmedPassword(e.target.value);
    }

    return (<Container fluid className="d-flex flex-column fullscreen justify-content-center">
        <Form className='m-2 p-5'>
            <FormGroup className="mb-3">
                <Form.Label htmlFor='#username' className="text-end">UserName</Form.Label>
                <Form.Control id='username' autoComplete={"off"} type="input" onChange={onChangeUsername}/>
            </FormGroup>
            <FormGroup className="mb-3">
                <Form.Label htmlFor='#password' className="text-end">Password</Form.Label>
                <Form.Control id="password" type="password" autoComplete={"off"} onChange={onChangePassword}/>
            </FormGroup>
            <FormGroup className="mb-3">
                <Form.Label htmlFor='#confirmpassword' className="text-end">Confirm Password</Form.Label>
                <Form.Control id="confirmpassword" type="password" autoComplete={"off"} onChange={onChangeConfirmPwd}/>
            </FormGroup>
            <Container className="d-flex justify-content-center">
                <Button style={{width:"50vw"}} className="align-self-center" onClick={register}>Register Now</Button>
            </Container>
        </Form>
    </Container>)

    // return (<Container fluid className="d-flex flex-column fullscreen justify-content-center">
    //     <Form>
    //         <FormGroup as={Row} className="mb-3">
    //             <Form.Label column sm={2} className="text-end">UserName</Form.Label>
    //             <Col sm={10}>
    //                 <Form.Control type="input" onChange={onChangeUsername}/>
    //             </Col>
    //         </FormGroup>
    //         <FormGroup as={Row} className="mb-3">
    //             <Form.Label column sm={2} className="text-end">Password</Form.Label>
    //             <Col sm={10}>
    //                 <Form.Control type="input" onChange={onChangePassword}/>
    //             </Col>
    //         </FormGroup>
    //         <Container className="d-flex justify-content-center">
    //             <Button style={{width:"50vw"}} className="align-self-center" onClick={register}>Register Now</Button>
    //         </Container>
    //     </Form>
    // </Container>)
}

export default Register;